<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能练习 - 乐考无忧</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
    <style>
        body {
            background-color: #f0f9f9;
            padding-bottom: 70px;
        }
        .header {
            padding: 15px;
            background: white;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .ai-badge {
            background: #B19CD9;
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .question-section {
            background: white;
            margin: 15px;
            padding: 20px;
            border-radius: 15px;
        }
        .option {
            display: block;
            padding: 12px 15px;
            margin: 10px 0;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            color: inherit;
            text-decoration: none;
        }
        .option.selected {
            background: #B19CD9;
            color: white;
            border-color: #B19CD9;
        }
        .regenerate-btn {
            background: #B19CD9;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .regenerate-btn:hover {
            background: #9f85c9;
        }
        .bottom-tools {
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
        .knowledge-point {
            color: #6c757d;
            font-size: 0.9rem;
            margin-bottom: 10px;
            padding: 4px 8px;
            background: #f8f9fa;
            border-radius: 4px;
            display: inline-block;
        }
        .regenerate-btn-small {
            background: #B19CD9;
            color: white;
            border: none;
            padding: 4px 12px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .regenerate-btn-small:hover {
            background: #9f85c9;
        }

        .regenerate-btn-small:disabled {
            background: #ccc;
        }
        .question-counter {
            color: #6c757d;
            font-size: 0.9rem;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .question-progress {
            height: 4px;
            margin: 8px 0;
            background-color: #e9ecef;
            border-radius: 2px;
        }

        .question-progress-bar {
            height: 100%;
            background-color: #B19CD9;
            border-radius: 2px;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
        <a href="politics-ai.html" class="text-dark"><i class="bi bi-chevron-left fs-4"></i></a>
        <h5 class="mb-0 mx-auto">AI生成的练习题</h5>
        <button class="regenerate-btn-small">
            <i class="bi bi-arrow-clockwise"></i>
            重新生成
        </button>
    </div>

    <!-- 题目部分 -->
    <div class="question-section">
        <div class="knowledge-point">
            <i class="bi bi-bookmark-fill"></i>
            考点：唯物辩证法 - 矛盾的普遍性与特殊性
        </div>
        <div class="question-counter">
            <span>第 1 题 / 共 10 题</span>
            <span>已完成 10%</span>
        </div>
        <div class="question-progress">
            <div class="question-progress-bar" style="width: 10%"></div>
        </div>
        <div class="question">
            <p><strong>1. 关于矛盾的普遍性和特殊性，下列说法正确的是：</strong></p>
            <a href="#" class="option">
                A. 矛盾的普遍性是指矛盾存在于一切事物的发展过程中
            </a>
            <a href="#" class="option">
                B. 矛盾的特殊性是指矛盾具有同一性
            </a>
            <a href="#" class="option">
                C. 矛盾的普遍性和特殊性是对立的
            </a>
            <a href="#" class="option">
                D. 矛盾的特殊性不包括矛盾的不平衡性
            </a>
        </div>
    </div>

    <!-- 更多题目... -->

    <!-- 底部工具栏 -->
    <div class="bottom-tools position-fixed bottom-0 w-100 bg-white p-3">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex gap-2">
                <button class="btn btn-outline-secondary" id="prevBtn">
                    <i class="bi bi-chevron-left"></i>
                    上一题
                </button>
                <button class="btn btn-outline-secondary" id="nextBtn">
                    下一题
                    <i class="bi bi-chevron-right"></i>
                </button>
            </div>
            <div class="d-flex gap-2">
                <button class="btn btn-primary">
                    <i class="bi bi-journal-text"></i>
                    答案解析
                </button>
            </div>
        </div>
    </div>

    <script src="assets/js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let currentQuestion = 1;
            const totalQuestions = 10; // 总题目数量

            function updateNavButtons() {
                $('#prevBtn').prop('disabled', currentQuestion === 1);
                $('#nextBtn').prop('disabled', currentQuestion === totalQuestions);
            }

            // 上一题按钮点击事件
            $('#prevBtn').click(function() {
                if (currentQuestion > 1) {
                    currentQuestion--;
                    // TODO: 加载上一题内容
                    updateNavButtons();
                }
            });

            // 下一题按钮点击事件
            $('#nextBtn').click(function() {
                if (currentQuestion < totalQuestions) {
                    currentQuestion++;
                    // TODO: 加载下一题内容
                    updateNavButtons();
                }
            });

            // 初始化按钮状态
            updateNavButtons();

            // 重新生成按钮点击事件
            $('.regenerate-btn').click(function() {
                $(this).html('<i class="bi bi-arrow-clockwise"></i> 生成中...');
                $(this).prop('disabled', true);
                
                setTimeout(() => {
                    location.reload();
                }, 1500);
            });

            // 查看答案解析按钮点击事件
            $('.btn-primary').click(function() {
                window.location.href = 'politics-ai-analysis.html';
            });

            // 选项点击事件
            $('.option').click(function(e) {
                e.preventDefault();
                $(this).closest('.question').find('.option').removeClass('selected');
                $(this).addClass('selected');
            });

            // 重新生成按钮点击事件
            $('.regenerate-btn-small').click(function() {
                $(this).html('<i class="bi bi-arrow-clockwise"></i> 生成中...');
                $(this).prop('disabled', true);
                
                setTimeout(() => {
                    location.reload();
                }, 1500);
            });

            function updateQuestionCounter() {
                const percentage = (currentQuestion / totalQuestions) * 100;
                $('.question-counter span:first-child').text(`第 ${currentQuestion} 题 / 共 ${totalQuestions} 题`);
                $('.question-counter span:last-child').text(`已完成 ${percentage}%`);
                $('.question-progress-bar').css('width', `${percentage}%`);
            }

            // Add this to the existing click handlers
            $('#prevBtn, #nextBtn').click(function() {
                updateQuestionCounter();
            });

            // Add this to document ready
            updateQuestionCounter();
        });
    </script>
</body>
</html>